<template>
	<view class="user-profile p-t-10">
		<view class="content">
			<view class="bg-white">
				<!-- 修改店铺头像 -->
				<!-- <view class="user-avatar-box flex-col col-center">
					<button class="column column-center" hover-class="none" open-type="chooseAvatar"
						@chooseavatar="onChooseAvatar" @click="onChooseAvatar">
						<image class="user-avatar"
							:src="newDistributionAvater?imgUrl+newDistributionAvater:distributioninfo.distribution_avatar!= '' ? imgUrl+distributioninfo.distribution_avatar:'/static/images/portrait_empty.png'">
						</image>
						<view class="muted xs">点击修改店铺头像</view>
					</button>
				</view> -->
				<view class="row-info flex bdb-line" @tap="changeName">
					<view class="label md">店铺名称</view>
					<view class="md flex-1">{{newDistributionAgentName?newDistributionAgentName:distributioninfo.distribution_agent_name}}</view>
					<u-icon name="arrow-right" />
				</view>
				<view class="row-info flex p-l-20">
					<view class="md">
						<text>客服微信</text>
					</view>
					<view class="p-l-40">
						<u-upload :header="{token: $store.getters.token}" :max-count="1" :action="action" :file-list="fileList" :show-progress="false" upload-text="上传微信二维码,作为店铺客服" @on-success="onSuccess"  @on-remove="onRemove"></u-upload>
					</view>
				</view>
				<view class="row-info flex bdb-line">
					<view class="label md">授权通知</view>
					<view class="md flex-1">
						<u-switch v-model="is_mnp_notice" @change="mnpNotice"></u-switch></view>
				</view>
				<button class="btn bg-primary white flex row-center" @click="isSetDistributionInfo">确认修改</button>
			</view>
		</view>
		<u-popup v-model="showNickName" :closeable="true" :maskCloseAble="false" mode="center" border-radius="14">
			<view class="modify-container bg-white" style="width: 70vw;padding: 24rpx">
				<view class="title xl text-center">修改店铺名称</view>
				<form @submit="changeNameConfirm">
					<u-form-item label="店铺名称" :labelWidth="120">
						<input style="height: 60rpx;" class="nr" :value="distributioninfo.distribution_agent_name" name="nickname"
							type="nickname" placeholder="请输入新的店铺名称" :maxlength="6">
						</input>
					</u-form-item>
					<button class="btn bg-primary white flex row-center" form-type="submit">确定</button>
				</form>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		baseURL
	} from '@/config/app.js';
	import {
		setDistributionInfo,
	} from "@/api/user";
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import {
		getMnpNotice,
		getConfig
	} from '@/api/app'
	import {
		uploadFile,
	} from '@/utils/tools'
	import {
		toLogin
	} from '@/utils/login'


	const FieldType = {
		NONE: '',
		SEX: 'sex',
		NICKNAME: 'nickname',
		AVATAR: 'avatar',
		MOBILE: 'mobile'
	}
	export default {
		name: 'userProfile',
		data() {
			return {
				is_mnp_notice:0,
				action: baseURL + '/api/file/formimage',
				distributioninfo: {},
				newDistributionAgentName: '',
				newDistributionAvater: '',
				newBusinessCard:'',
				fieldType: FieldType.NONE,
				showPicker: false,
				showMobile: false,
				showPwd: false,
				showNickName: false,
				canSendSms: true,
				imgUrl:`${this.$imgUrl}/`,
				fileList:[],
			}
		},
		methods: {
			...mapMutations(['setConfig']),
			getdistributioninfo() {
				this.distributioninfo=this.distribution;
				this.is_mnp_notice=this.distribution.is_mnp_notice;
				this.fileList.push({url:this.distributioninfo.business_card})
			},
			onSuccess(e) {
			this.newBusinessCard=e.data.base_uri
			console.log('this.newBusinessCard',this.newBusinessCard)
			},
			onRemove(index) {
				this.newBusinessCard=this.distributioninfo.business_card
			},
			uploadImage(path) {
				uni.showLoading({
					title: '正在上传中...',
					mask: true
				});
				uploadFile(path).then(res => {
					uni.hideLoading()
					console.log(res)
					this.newDistributionAvater=res.base_uri
				}).catch(() => {
					uni.hideLoading()
					this.$toast({
						title: "上传失败"
					})
				})
			},
			onChooseAvatar(e) {
				this.fieldType = FieldType.AVATAR;
				// #ifndef MP-WEIXIN
				// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
				uni.$u.route({
					// 关于此路径，请见下方"注意事项"
					url: '/components/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					// 内部已设置以下默认参数值，可不传这些参数
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						//fileType: 'jpg',
					}
				})
				// #endif
				// #ifdef MP-WEIXIN
				console.log('e.detail.avatarUrl',e.detail.avatarUrl)
				if (e.detail.avatarUrl) {
					this.uploadImage(e.detail.avatarUrl)
				}
				// #endif
			},
			// 修改店铺昵称
			async changeNameConfirm(e) {
				this.fieldType = FieldType.NICKNAME;
				this.newDistributionAgentName = e.detail.value.nickname
				if (!this.newDistributionAgentName) return this.$toast({
					title: '请输入新的昵称'
				})
				this.showNickName = false;
			},

			//确认修改店铺信息
			async isSetDistributionInfo() {
				console.log('this.newBusinessCard',this.newBusinessCard)
				const res = await setDistributionInfo({
					distribution_agent_name:this.newDistributionAgentName?this.newDistributionAgentName:this.distributioninfo.distribution_agent_name,
					business_card:this.newBusinessCard?this.newBusinessCard:this.distributioninfo.business_card,
					is_mnp_notice:this.is_mnp_notice
				})
				if (res.code == 1) {
					toLogin()
					this.$toast({
						title: res.msg
					});
				}
			},
			// 修改昵称
			changeName() {
				this.fieldType = FieldType.NICKNAME;
				this.newDistributionAgentName = '';
				this.showNickName = true;
			},
			//授权微信发送通知
			mnpNotice() {
				if(!this.is_mnp_notice){
					return true;
				}
				return new Promise(resolve => {
				    getMnpNotice({
				        scene: '400,401'
				    }).then(res => {
				        if (res.code == 1) {
				            uni.requestSubscribeMessage({
				                tmplIds: res.data,
				                fail(res) {
				                    console.log(res.errMsg);
				                },
				                complete() {
				                    resolve();
				                }
				            });
				        } else {
				            resolve();
				        }
				    });
				});
			},
		},
		onLoad() {
			this.getdistributioninfo()
			// #ifdef MP-WEIXIN
			// #endif
		},
		onUnload() {
			
		},
		computed: {
			...mapGetters(['token', 'appConfig','distribution'])
		}
	}
</script>

<style lang="scss">
	.user-profile {
		min-height: calc(100vh - env(safe-area-inset-bottom));
		display: flex;
		flex-direction: column;

		.content {
			// flex: 1;
			border-top-left-radius: 28rpx;
			border-top-right-radius: 28rpx;

			.user-avatar-box {
				padding: 30rpx;

				.user-avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
			}

			.row-info {
				padding: 30rpx 20rpx;

				.label {
					width: 180rpx;
				}

				.bd-btn {
					padding: 8rpx 24rpx;
					border: 1px solid $-color-primary;
					color: $-color-primary;
				}
			}
			.code{
				text-align: center;
			}

			.bdb-line {
				//border-bottom: 1rpx solid #e5e5e5;
			}
			.btn {
				height: 80rpx;
				border-radius: 60rpx;
				margin: 0rpx 200rpx;
			}
		}

		.license {
			margin-top: 80rpx;
			color: #a7a7a7;
		}

		.save-btn {
			margin: 40rpx 54rpx 0;
			height: 88rpx;
			border-radius: 10rpx;
		}

		.modify-container {
			padding: 30rpx;
			width: 620rpx;
			border-radius: 30rpx;

			.title {
				padding: 26rpx 0rpx;
			}

			.btn {
				height: 80rpx;
				border-radius: 60rpx;
				margin: 60rpx 50rpx 0;
			}
		}
		.qr-code{
			text-align: center;
			
		}
	}
	.usual-item{
		top: -10px;
	}
</style>
